<template>
  <div>
    <div class="citybox">
      <van-nav-bar title="城市列表" left-arrow @click-left="$router.back()" />
    </div>
    <van-index-bar :index-list="newList">
      <div v-for="item in newList" :key="item">
        <van-index-anchor :index="item" />
        <van-cell
          :title="v.label"
          v-for="(v, index) in getCityList(item)"
          :key="index"
          @click="getCity(v)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getCityList, getHotCityName } from '@/api/area'
import { setHouse, getHouse } from '@/utils/stroage'
export default {
  async created () {
    const res = await getCityList()
    // 获取所有一级城市列表
    this.upcaseList = res.data.body
    // 获取热门城市列表
    const cityRes = await getHotCityName()
    cityRes.data.body.forEach((item) => {
      item.short = '热'
    })
    // 取存进去的城市信息
    const localCity = JSON.parse(getHouse())
    localCity.short = '#'
    // 渲染列表
    this.upcaseList = [...this.upcaseList, ...cityRes.data.body, localCity]
    // // 城市列表

    // const res1 = await getCityList()
    // this.cityList = res1.data.body
    // // 热门城市
    // const res2 = await getHotCityName()
    // this.hotCtiyList = res2.data.body
    // // // indexList
    // console.log(this.cityList)
    // this.indexList = this.cityList.map((item) => {
    //   return item.short.charAt(0)
    // })
    // this.indexList.sort()
    // this.indexList = this.indexList.map((item) => {
    //   return item.toUpperCase()
    // })
    // this.indexList = new Set(this.indexList)
    // this.indexList = Array.from(this.indexList)
    // this.indexList.unshift('热')
    // this.indexList.unshift('#')
  },
  data () {
    return {
      upcaseList: [],
      newList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'S',
        'Y',
        'Z'
      ],
      indexList: []
    }
  },
  methods: {
    getCityList (cityName) {
      const arr = this.upcaseList.filter((item) => {
        return item.short.charAt(0).toLocaleUpperCase() === cityName
      })
      return arr
    },
    getCity (v) {
      this.$router.back()
      //  当前点击城市传入 存进本地
      setHouse(JSON.stringify(v))
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  position: relative;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 46px;
  background-color: #59b67f;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}
</style>
